<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Spin Wheel</title>
</head>
<body>
  <div class="container">
    <div class="spinBtn">开始抽奖</div>
    <div class="wheel">
      <div class="number" style="--i:1;--clr:#db7093;"><span>100</span></div>
      <div class="number" style="--i:2;--clr:#82db70;"><span>1</span></div>
      <div class="number" style="--i:3;--clr:#8070db;"><span>50</span></div>
      <div class="number" style="--i:4;--clr:#c6db70;"><span>0</span></div>
      <div class="number" style="--i:5;--clr:#db9e70;"><span>1000</span></div>
      <div class="number" style="--i:6;--clr:#db7070;"><span>10</span></div>
      <div class="number" style="--i:7;--clr:#70cfdb;"><span>5</span></div>
      <div class="number" style="--i:8;--clr:#db70b9;"><span>20</span></div>
    </div>
  </div>

  <script>
      const btn =  document.querySelector(".spinBtn");
      const wheel =  document.querySelector(".wheel");
      let value = Math.ceil(Math.random()*3600)
      btn.onclick= function(){
        wheel.style.transform = "rotate("+value+"deg)";
        value = Math.ceil(Math.random()*3600)

      }

  </script>
</body>
</html>